<!--
 * @description: 任务概况图标组件
 * @fileName: TasksOverview.vue
 * @author: 自己的名字
 * @date: 2024-08-08 15:27:02
 * @version: V1.0.0
!-->
<script setup lang="ts">
import * as echarts from 'echarts'
const chartRef = ref()

onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(chartRef.value)
  // 绘制图表
  myChart.setOption({
    title: {},
    tooltip: {
      trigger: 'axis',
      //   axisPointer: { type: "cross" },
    },
    grid: {
      // 让图表占满容器
      top: '40px',
      left: '90px',
      right: '10px',
      bottom: '40px',
    },
    legend: {
      // width: '1260px',
      left: 'center',
      textStyle: {
        color: '#fff',
        fontSize: 12,
      },
    },
    axisTick: {
      alignWithLabel: true,
    },
    xAxis: {
      type: 'category',
      nameTextStyle: {
        color: '#fff',
      },
      axisTick: {
        alignWithLabel: true,
        color: '#fff',
      },
      axisLabel: {
        color: '#fff',
      },
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    },
    yAxis: [
      {
        type: 'value',
        // name: '任务量',
        min: 200,
        position: 'left',
        axisLine: {
          show: true, // 不显示坐标轴线
          color: '#fff',
        },
        nameTextStyle: {
          color: '#fff',
        },
        axisLabel: {
          formatter: '{value} 万',
          color: '#fff',
        },
        axisTick: {
          show: true,
          alignWithLabel: true,
          color: '#fff',
        },
        splitLine: {
          show: true, // 不显示网格线
          lineStyle: {
            // 使用深浅的间隔色
            color: '#075e85',
          },
        },
      },
    ],
    series: [
      {
        name: '2023',
        type: 'line',
        colorBy: 'data',
        color: ['#0ff'],
        label: {
          show: false,
        },
        itemStyle: {
          // normal: { color: 'yellow', lineStyle: { color: 'yellow' } },
        },
        data: [556, 703, 664, 1043, 1053, 402, 505, 820, 736, 710, 910, 820],
      },
      {
        name: '2024',
        type: 'line',
        color: ['#f4d313'],
        label: {
          show: false,
        },
        itemStyle: {
          // normal: { color: 'white', lineStyle: { color: 'white' } },
        },
        data: [656, 603, 764, 1143, 1003, 602, 705, 620, 936, 510, 810, 1020],
        // areaStyle: {
        //   color: '#f0f0',
        //   opacity: 0.5,
        // },
      },
    ],
  })
})
</script>
<template>
  <div id="monthSales">
    <div class="chart" ref="chartRef"></div>
  </div>
</template>

<style scoped lang="scss">
#monthSales {
  width: 95%;
  height: 26.5vh;
  .chart {
    height: 26.5vh;
  }
}
</style>
